<template>
	<wsPage title="优惠券发布">
		<div slot="page_operate">
			<Button  @click="goBack"><Icon type="ios-arrow-back"></Icon><span>返回</span></Button>
		</div>
		<wsPanel>
			<template slot="panel_head_title">发布新优惠券</template>
			<div slot="panel_body" class="ws-form-div">
				<div class="ws-form-div-form">
					<div class="step-data">
						<Form class="myForm" ref="modalForm" :model="modal.form" :rules="modal.validate" :label-width="100">
					        <FormItem label="名称" prop="name">
					            <Input class="myinput" v-model="modal.form.name" autofocus></Input>
					        </FormItem>
							<FormItem label="面值" prop="couponAmount">
					            <Input class="myinput" v-model="modal.form.couponAmount" autofocus></Input>
					        </FormItem>
							<FormItem label="满足多少可用" prop="satisfyAmount">
					            <Input class="myinput" v-model="modal.form.satisfyAmount" autofocus></Input>
					        </FormItem>
							<FormItem label="发布数量" prop="publishNum">
								<RadioGroup  v-model="modal.form.publishNum">
					                <Radio :label="-1">无限</Radio>
									<Radio :label="1">有限</Radio>
					            </RadioGroup>
								<Input v-if="modal.form.publishNum != -1 " v-model="modal.form.publishNum" autofocus></Input>
					        </FormItem>
					        <FormItem label="是否有券码" prop="codeFlag">
								<RadioGroup  v-model="modal.form.codeFlag">
									<Radio :label="1">有码</Radio>
									<Radio :label="0">无码</Radio>
								</RadioGroup>
								
					        </FormItem>
							<FormItem label="有效期至" prop="dealineDate">
					            <DatePicker type="datetime" placeholder="截止时间" v-model="modal.form.dealineDate"></DatePicker>
					        </FormItem>
					        <FormItem label="主题背景" required>
					            <ws-upload-cos
							        ref="upload"
							        catelog="coupon"
							        :cfile-key="modal.upload.key"
							        :show-upload-list="false"
							        :format="['jpg','jpeg','png']"
							        :max-size="2048"
							        :on-success="uploadSuccess"
							        type="drag"
							        style="display: inline-block;">
							        <div style="width: 400px;height:200px;margin: 5px;">
							            <img :src="modal.form.imgUrl" v-if="modal.form.imgUrl != ''" width="400px" height="200px" >
							        </div>
							    </ws-upload-cos>
								<div><span>图片规格为1024*988</span></div>
					        </FormItem>
					         <FormItem>
					         	<Button type="primary" @click="saveForm">保存</Button>
					         	<Button @click="goBack">取消</Button>
					         </FormItem>
					    </Form>	
					</div>
				</div>
			</div>
		</wsPanel>
	</wsPage>
</template>

<script>	
	import Util from '../../../common/util.js'
	import Common from '../../../common/common.js';
	import FileUtil from '../../../common/file.js';
	import productQuery from '../appCategory/productQuery';
	
	export default {
		components: {
    		productQuery
    	},
		data() {
			return {
				//新增属性弹框
				modal: {
					show: false,
					form: {
						name: '',
						couponAmount: '',
						satisfyAmount: '',
						publishNum: -1,
						codeFlag: 0,
						dealineDate: '',
						imgUrl: '',
					},
					upload: {
						key: ''
					},
					validate: {
						name: [
	                        { required: true, message: '名称不能为空', trigger: 'blur' }
	                    ],
	                    couponAmount: [
	                        { required: true, message: '面值不能为空', trigger: 'blur'}
	                    ],
	                    satisfyAmount: [
	                        { required: true, message: '满足金额不能为空', trigger: 'blur'}
	                    ],
	                    // publishNum: [
	                    //     { required: true, message: '发布数量不能为空', trigger: 'blur'}
						// ],
						codeFlag: [
	                        { required: true, message: '必须选择'}
						],
						dealineDate: [
							{required: true, message: '截止日期不能为空'}
						]
					},
					table: {
						data:[], //主题项记录
						productData: [] //主题项商品记录
					}
				},
				modalItem: {
					show: false,
					editIndex: -1, //当前编辑元素为-1
					title: '新增主题项',
					form: {
						content: ''
					}
				},
				cropper: {
                show: false,
                datas: {
                    top: {
                        base64: ''
                    },
                    cover: {
                        base64: ''
                    }
                },
                config: {
                    fixedNumber: [27, 20],
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 375,
                    autoCropHeight: 278,
                }
            },
				//文本编辑器
				editor: {
            		message: '',
            		config: {
            			initialFrameWidth: 600,
            			initialFrameHeight: 350,
            			zIndex: 11000
            		}
            	},
            	productModal: {
            		show: false,
            		title: '选择商品',
            		table: {
            			data: []
            		}
            	},
            	productQueryModal: {
            		show: false,
            		title: '选择商品'
            	},
            	fields: {
            		languages: [],
            		types: ['轮播主题', '推荐主题', '单图主题', '商品关联主题']
            	}
			}
		},
		computed: {
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.initLanguages();
			},
			/**
			 * 初始化可翻译的语言列表
			 */
			initLanguages() {
				let _this = this;
				this.axios.get('/ws/ops/v2/languages/translatable').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.fields.languages = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
            /**
             * 返回
             */
            goBack() {
    			this.$router.push({name: 'ops_discountCoupon_management_list'});
    		},
    		/**
    		 * 模态框保存
    		 */
    		modalSave() {
    			if(-1 == this.modalItem.editIndex) {
    				//新增
    				this.submitAddModal();
    			} else {
    				this.submitEditModal();
    			}
    		},
    		/**
    		 * 提交新增的模态框
    		 */
    		submitAddModal() {
    			let content = this.$refs['ue'].getUEContent();
    			console.log(content);
    			if(Util.vad.isBlank(content)) {
    				this.$Message.info('请添加主题内容哦');
    				return;
    			}
    			this.modal.table.data.push({
    				title: '主题项',
    				content: content,
    				productNum: 0
    			});
    			//同时新增一条商品列表记录
    			this.modal.table.productData.push({});
    			this.modalItem.show = false;
    		},
    		/**
    		 * 提交编辑编辑框
    		 */
    		submitEditModal() {
    			let index_ = this.modalItem.editIndex;
    			let content = this.$refs['ue'].getUEContent();
    			this.modal.table.data[index_].content = content;
    			this.modalItem.show = false;
    		},
    		/**
    		 * 模态框取消
    		 */
    		modalCancel() {
    			this.modalItem.show = false;
    		},
    		/**
    		 * 保存表单
    		 */
    		saveForm() {
    			this.$refs['modalForm'].validate((valid) => {
					if (valid) {
						this.submitForm();
                    } 
               });
    		},
    		submitForm() {
    			//构建数据模型
				let postData = {};
				postData = this.modal.form;
    			let _this = this;
    			console.log(postData)
    			this.axios.post('/ws/ops/coupon', postData).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('发布优惠券成功');
						_this.$router.push({name:'ops_discountCoupon_management_list'});
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('发布优惠券失败:' + message_);
					}
				});
				
			},
			
    		uploadSuccess(response, file, fileList) {
    			console.log(response);
				if(0 == response.meta.code) {
					this.modal.form.imgUrl = response.data.pubFileUrl;
					this.modal.upload.key = response.data.fileId;
				}
			}
		}
	}
</script>

<style scoped>
 .myForm .myinput {
	width: 180px;
}
</style>